<template>
    <view class="password tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/" fixed :bottom-shadow="false">修改密码</tn-navbar>
        <view class="content">
            <view class="content-item tn-flex-center-start">
                <view class="tn-col-3">手机号</view>
                <view class="tn-flex-1"><tn-input class="password-input" v-model="mobile" disabled></tn-input>
                </view>
            </view>
            <view class="content-item tn-flex-center-start">
                <view class="tn-col-3">验证码</view>
                <view class="tn-flex-5"><tn-input class="password-input" v-model="code"></tn-input>
                </view>
                <view class="input-send">
                    <tn-button class="send-code" v-show="sendSmsCodeBtn" @click="sendCode">获取验证码</tn-button>
                    <tn-button class="send-code" v-show="!sendSmsCodeBtn">倒计时：{{ countdown }}</tn-button>
                </view>
            </view>
            <view class="content-item tn-flex-center-start">
                <view class="tn-col-3">新密码</view>
                <view class="tn-flex-1"><tn-input class="password-input" v-model="password"></tn-input>
                </view>
            </view>
            <!-- <view class="content-item tn-flex-center-start">
                <view class="tn-col-3">确认密码</view>
                <view class="tn-flex-1"><tn-input class="password-input" v-model="confirmPassword"></tn-input>
                </view>
            </view> -->

        </view>
        <view class="password-tool tn-bg-main" @click="submit"> 修改 </view>
    </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { updatePassword } from "@/api/userSetting";
import { sendSmsCode } from "@/api/user";
import { ResultEnum } from "@/enums/httpEnum";
import { navHome } from "@/tuniao-ui/utils";
import { rangeLength } from "@/tuniao-ui/utils/testUtils";
import { loading, closeLoading, toast } from "@/tuniao-ui/utils/messageUtils";
const userStore = useUserStore();

const sendSmsCodeBtn = ref<boolean>(true);      //是否展示发送验证码按钮
const countdown = ref<number>(60);

// 表单数据 少就不写对象了
const mobile = ref("");
const code = ref("");
const password = ref("");
const confirmPassword = ref("");

function sendCode() {
    let params = { phone: mobile.value, scene : "password"};
    loading({ title: "发送中" });
    sendSmsCode(params).then((res) => {
        const { code, message: msg } = res;
        closeLoading();
        if (code == ResultEnum.SUCCESS) {
            toast({ title: "发送成功" });
            // 发送按钮不显示
            sendSmsCodeBtn.value = false;
            countdown.value = 60;
            let timer = setInterval(() => {
                // 定时器设置每秒递减
                countdown.value--; // 递减时间

                if (countdown.value <= 0) {
                    sendSmsCodeBtn.value = true; // 60s时间结束还原v-show状态并清除定时器
                    clearInterval(timer);
                }
            }, 1000);

        } else {
            toast({ title: "发送失败" + msg });
        }
    });
}

function submit() {

    if (!rangeLength(password.value, [6, 20])) {
        toast({ title: "密码长度在6~20之内" });
        return;
    }
  
    if (!code.value) {
        toast({ title: "请输入验证码" });
        return;
    }
    if (!rangeLength(code.value.toString(), [6, 6])) {
        toast({ title: "验证码为6位数字" });
        return;
    }
    loading({ title: "正在提交" });
    updatePassword({code:code.value, password: password.value}).then((res) => {
        const { code, message: msg } = res;
        closeLoading();
        toast({ title: msg });
        if (code == ResultEnum.SUCCESS) {
            userStore.logout();
            navHome();
        }
    });
}
onMounted(() => {
    mobile.value = userStore.getMobile;
})
</script>
<style lang="scss" scoped>
body {
    background-color: #fff;
}

.password {
    background-color: #fff;
}

.content {
    margin-top: 30rpx;
    padding: 0 20rpx;

    &-item {
        height: 120rpx;
        padding-bottom: 50rpx;
    }

    .input-send .send-code {
        padding-top: 15rpx;
        padding-bottom: 15rpx;
        color: #999;
    }
}

.password-input {
    border-bottom: 1px solid #ccc;
}

.password-tool {
    height: 100rpx;
    padding: 0 20rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
}
</style>
  